<template>
    <div class="container">
        <div class="wrapper">
            <div class="from">
                <el-form :model='form' labelWidth="150px">
                    <div class="head">
                        <span>微信设置</span>
                    </div>
                    <el-form-item label="公众号APPID：">
                        <el-col :span="16">
                            <el-input v-model="form.appId" size="small"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="公众号APPKEY：">
                        <el-col :span="16">
                            <el-input v-model="form.appSecret" size="small"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="微信支付账号：">
                        <el-col :span="16">
                            <el-input v-model="form.mchId" size="small"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="微信支付秘钥：">
                        <el-col :span="16">
                            <el-input v-model="form.key" size="small"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="回调网址：">
                        <el-col :span="16">
                            <el-input v-model="form.notify_url" size="small"></el-input>
                        </el-col>
                    </el-form-item>
                    <div class="button-wrapper">
                        <el-button type="primary" size="medium" @click="submitForm()">提交</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                width: '150px',
                form: {
                    key: '',
                    appId: '',
                    mchId: '',
                    notify_url: '',
                    appSecret: '',
                },

            }
        },

        created() {
            this.getData()
        },

        methods: {
            submitForm() {
                let data = this.form
                this.apiPost('Admin/setWxPay', data).then(res => {
                    let remind = res.error ? 'error' : 'success'
                    _g.toastMsg(remind, res.msg)
                })
            },

            getData() {
                this.apiPost('Admin/wxPay').then(res => {
                    //console.log(res)
                    this.form = res
                })
            }
        },
    }
</script>

<style scoped>
    .container {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background: #FFFFFF;
    }

    .wrapper {
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 10px;
        width: 500px;
    }

    .wrapper .head {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 36px;
        background: rgba(1, 119, 191, 0.6);
        margin-bottom: 10px;
    }

    .wrapper .head span {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
    }

    .wrapper .from {
        border: 1px solid rgba(1, 119, 191, 0.6);
        padding: 0;
    }

    .button-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        box-sizing: border-box;
    }

</style>